<template>
  <Card style="margin: 20px">
    <!-- 头部 -->
    <!-- <test></test> -->
    <Form :label-width="80">
      <Row type="flex">
        <Col span="6">
          <FormItem label="标签名称">
            <Input placeholder="请输入" v-model="form.tags" />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="城市">
            <Select v-model="form.province" @on-change="changeCity(form.province)">
              <Option v-for="item in showApp" :value="item" :key="item">{{ item }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="地区">
            <Select v-model="form.city">
              <Option v-for="item in showAdd" :value="item" :key="item">{{ item }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="企业简称">
            <Input placeholder="请输入" v-model="form.shortName" />
          </FormItem>
        </Col>
      </Row>
      <Row type="flex" justify="space-between">
        <Col span="6">
          <FormItem label="状态">
            <Select v-model="form.state">
              <Option v-for="item in status" :value="item.value" :key="item.label">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="15">
          <Button @click="eliminate" style="margin-right: 10px">清除</Button>
          <Button type="primary" @click="search">搜索</Button>
        </Col>
        <Col span="12" flex="0">
          <Button type="success" icon="md-create" @click="isShows">新增用户</Button>
        </Col>
      </Row>
    </Form>
    <!-- 新增区 组件-->
    <Increasedpages :isShow.sync="isShow" @changegb="changegb" :editorId="editorId"></Increasedpages>
    <el-alert :title="title" type="info" show-icon :closable="false"></el-alert>
    <!-- 表格区 -->
    <Col style="margin: 20px">
      <Table :columns="columns3" :data="data1">
        <template slot="operation" slot-scope="{ row }">
          <el-button type="success" icon="el-icon-edit" circle @click="compile(row.id)"></el-button>
          <el-button @click="changeState(row)" v-if="row.state === 0" type="warning" icon="el-icon-check" circle></el-button>
          <el-button @click="changeState(row)" v-else type="danger" icon="el-icon-close" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="remove(row)"></el-button>
        </template>
      </Table>
    </Col>
    <!-- 分页 -->
    <Row type="flex" justify="end">
      <Page :total="page.total" show-elevator show-sizer :current="page.page" :page-size="page.pagesize" @on-page-size-change="changePageSize" @on-change="changePage" />
    </Row>
  </Card>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { list, remove, disabled } from '@/api/hmmm/companys'
import Increasedpages from './increased/increased-pages.vue'
export default {
  components: {
    Increasedpages
  },
  data () {
    return {
      status: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      showApp: [],
      showAdd: [],
      form: {
        province: '', // 城市
        city: '', // 地区
        tags: '', // 标签名称
        shortName: '', // 企业简称
        state: '' // 状态
      },
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        total: 0 // 数据总数
      },
      data1: [], // 表单
      isShow: false, // 遮罩层
      columns3: [
        {
          title: '序号',
          key: 'id',
          minWidth: 120
        },
        {
          title: '企业编号',
          key: 'number',
          minWidth: 120
        },
        {
          title: '企业简称',
          key: 'shortName',
          minWidth: 120
        },
        {
          title: '标签',
          key: 'tags',
          minWidth: 120
        },
        {
          title: '创建者',
          key: 'creatorID',
          minWidth: 120
        },
        {
          title: '创建日期',
          key: 'addDate',
          minWidth: 120
        },
        {
          title: '备注',
          key: 'remarks',
          minWidth: 120
        },
        {
          title: '状态',
          key: 'state',
          render (h, params) {
            const status = params.row.state
            if (status === 1) {
              return h('div', '已禁用')
            }
            if (status === 0) {
              return h('div', '已启用')
            }
          },
          minWidth: 120
        },
        {
          title: '操作',
          slot: 'operation',
          align: 'center',
          minWidth: 200
        }
      ],
      title: '',
      editorId: 0
    }
  },
  created (city) {
    this.list()
    this.showApp = provinces(city)
  },
  methods: {
    // 渲染企业管理列表
    async list (params = this.page) {
      const { data } = await list(params)
      // console.log(data)
      this.data1 = data.items
      this.title = `共${data.counts}条记录`
      this.page.total = data.counts
    },
    // 城市
    changeCity (province) {
      console.log(province)
      this.showAdd = citys(province)
    },
    async remove (id) {
      // console.log(id)
      try {
        await this.$confirm('确定删除')
        await remove(id)
        this.$message.success('删除成功！')
        this.list()
      } catch (error) {
        console.log(error)
      }
    },
    async compile (id) {
      // console.log(id)
      this.editorId = id
      // console.log(this.editorId)
      this.isShow = true
    },
    isShows () {
      this.isShow = true
    },
    eliminate () {
      this.form = {
        province: '', // 城市
        city: '', // 地区
        tags: '', // 标签名称
        shortName: '', // 企业简称
        state: '' // 状态
      }
    },
    changegb () {
      // console.log(123)
      this.list()
    },
    changePage (page) {
      this.page.page = page
      this.list()
    },
    changePageSize (pagesize) {
      this.page.pagesize = pagesize
      this.list()
    }, // 搜索按钮
    async search () {
      // console.log(this.form)
      const obj = {}
      Object.keys(this.form).map((item) => {
        if (this.form[item]) {
          obj[item] = this.form[item]
          // console.log(obj)
        }
      })
      // console.log(obj)
      // console.log(JSON.stringify(obj))
      // console.log(JSON.stringify(obj) !== '{}')
      if (JSON.stringify(obj) !== '{}') {
        this.list({ ...this.page, ...obj })
      }
      // console.log(result)
    },
    async changeState (row) {
      console.log(row)
      this.$confirm(`已成功${row.state === 1 ? '禁用' : '启用'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.state === 0) {
            await disabled({ id: row.id, state: 1 })
          } else {
            await disabled({ id: row.id, state: 0 })
          }
          this.list()
          this.$message({
            type: 'success',
            message: `${row.state === 0 ? '禁用' : '启用'}成功!`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作!'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
